import React, { useState,useEffect } from 'react';
// let timer;
export default function Counter(props) {
    console.log('props',props)

    const [count, setCount] = useState(0);
    const [count2, setCount2] = useState(1);

    console.log('count 1', count);

    // useEffect的第二个参数传一个空数组理解成是componentDidMount
    useEffect(() => {
        console.log('useEffect 1',count)
        // let timer = setInterval(() => {
        //     setCount(count+1);
        // }, 1000);
        // return ()=>{
        //     console.log('清除')
		// 	clearInterval(timer)
		// }
        document.title = `You clicked ${count} times`;
        return () => {
            console.log('useEffect 1 clear',count)
        }
    },[count])

    useEffect(() => {
        console.log('useEffect 2')
        },[count2])
    // 在3秒内快速点击5次按钮，控制台打出的结果是什么样的？
    // 0 1 2 3 4 5

    console.log('count 2', count);

    return (
        <div>
            <p>You clicked {count} times</p>
            <p>You clicked {count2} times2</p>
            <button onClick={() => {console.log('count',count);setCount(count + 1)}}>
                Click me
            </button>
            <button onClick={() => {console.log('count2',count2);setCount2(count2 + 1)}}>
                Click me2
            </button>
        </div>
    );
}

// const customAsync = (count) => {
//     return new Promise((resolve,reject) => {
//         timer = setTimeout(() => {
//             resolve(count+1)
//         }, 1000);
//     })
// }
